<template>
  <div class="Left">
    <div>
      <span>——————</span>
    </div>
    <div>
      <h1>中国领先驾校平台</h1>
    </div>
    <div>
      <p>立足驾培，大胆创新，以实现中国最大的互联网驾校为目标，为广大优秀教练提供全方位的展示平台，给更多的学员提供最优质的学车服务体验！</p>
    </div>
  </div>
  <div class="Right">
    <div class="DL_ZC">
      <div class="xcbtext">
        <h3>学车吧后台</h3>
        <p>欢迎您！👋</p>
      </div>
      <el-form ref="DLRefRule" :rules="rules" :model="formData" label-position="top" label-width="100%" style="width: 70%">
        <!-- 用户名 -->
        <el-form-item prop="id" label="用户名:" >
          <el-input v-model="formData.id" placeholder="用户名" clearable></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password" label="密码:">
          <el-input v-model="formData.password" placeholder="密码" type="password" show-password ></el-input>
        </el-form-item>
        <!--                             按钮区域-->
        <div class="dialog-footer">
          <el-button type="primary" style="flex: 1" @click="handleLogin">登录</el-button>
        </div>
      </el-form>
      <div class="bott">
        <p>该登录仅限于平台<span style="color: #005fb0">管理员</span>登录</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {useStore} from 'vuex'

const store = useStore()

// 初始化表单
const formData =ref({
  id:'',password:'',name:''
})
// 校验规则
const rules=ref({
  id: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
})

const DLRefRule=ref(null)
// 获取当前时间
const UpData=()=>{
  const nowDate = new Date();
  const date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate(),
  }
  const newmonth = date.month>10?date.month:'0'+date.month
  const day = date.date>10?date.date:'0'+date.date
  return  date.year + '-' + newmonth + '-' + day
}
const handleLogin=()=>{
  DLRefRule.value.validate(async (valid) => {
    if (valid) {
       await store.dispatch('app/ALogin', formData.value)
      return false;
    }
  })
}
</script>

<style scoped>
.el-form-item__label{
  font-family: 方正粗黑宋简体,serif ;
  font-size: 120px !important;
}
.el-tabs__item {
  margin: 0;
  font-family: 方正粗黑宋简体,serif ;
  font-size: 17px !important;
}
.Left{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /*border: 1px solid blue;*/

}
.Left div{
  margin: 5px 0 5px 20%;
  color: white;
}
.Left span{
  font-size: 60px;
}
.Left h1{
  font-size: 60px;
  font-family: 方正粗黑宋简体, serif ;
}
.Left p{
  opacity: 0.6;
}
.Right{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*border: 1px solid blue;*/
}
.DL_ZC{
  width: 400px;
  height: 480px;
  background: white;
  display: flex;
  opacity: 0.95;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 2%;
  overflow: hidden;
  /*border: 1px solid red;*/
}
.dialog-footer{
  display: flex;
  align-content: center;
  justify-content: center;
}
.xcbtext{
  display: flex;
  margin: 20px auto 20px auto;
  align-items: center;
  justify-content: center;
}
.xcbtext h3{
  font-size: 28px;
  font-weight: 600;
  font-family: "Rubik", "Times New Roman", serif;
  margin-right: 10px;
  opacity: 0.8;
}
.bott{
  height: 40px;
  position: absolute;
  bottom: -10px;
}
.bott p{
  opacity: 0.6;
}
</style>